<nav class="navbar navbar-expand-lg fixed-top navbar-light py-4" id="menu">

  <!-- BRAND LOGO OR NAME -->
  <a class="navbar-brand top" id="site-logo" href="{{ '/' | relative_url }}">
    {% if site.navbar_img %}
      <img class="navbar-brand-img" src="{{ site.navbar_img | relative_url }}" alt="">
    {% elsif site.title %}
      {{ site.title }}
    {% else %}
      <img class="navbar-brand-img" src="{{ 'assets/images/Cadre.png' | relative_url }}" alt="">
    {% endif %}
  </a>
  
  <!-- NAVIGATION -->
  {% if site.data.navigation %}
    {% if page.url == "/" %}
      {% assign current = 'index.html' %}
    {% else %}
      {% assign url_list = page.url | split: "/" %}
      {% assign current = url_list[1] | strip %}
    {% endif %}
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    
    <div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
      <div class="navbar-nav">
      {% for item in site.data.navigation %}
        {% if item.link == current %}
          {% assign active_status = 'active' %}
        {% else %}
          {% assign active_status = '' %}
        {% endif %}
        <a class="nav-item nav-link {{ active_status }}" href="{{ item.link | relative_url }}">{{ item.name }}</a>
      {% endfor %}
      </div>
    </div>
  {% endif %}
</nav>
